"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { TestTube, Beaker, ClipboardCheck, ArrowRight, TrendingUp, Clock, FileText } from "lucide-react"
import Link from "next/link"
import { useState, useEffect } from "react"
import { apiClient } from "@/lib/api"
import type { ApiResponse } from "@/types"

interface StatsData {
  total: number
  unassigned: number
  mixedOnly: number
  mixedGroups: number
  samplingGroups: number
}

export default function SamplesOverviewPage() {
  const [stats, setStats] = useState<StatsData>({
    total: 0,
    unassigned: 0,
    mixedOnly: 0,
    mixedGroups: 0,
    samplingGroups: 0,
  })

  // 获取统计数据
  const fetchStats = async () => {
    try {
      const result: ApiResponse<StatsData> = await apiClient.get("/samples/stats")
      if (result.success && result.data) {
        setStats(result.data)
      }
    } catch (error) {
      console.error("获取统计数据失败:", error)
    }
  }

  useEffect(() => {
    fetchStats()
  }, [])

  const quickActions = [
    {
      title: "样品混样处理",
      description: "为未分配的样品进行混样编号分配",
      icon: Beaker,
      href: "/dashboard/samples/mixing",
      color: "bg-blue-500",
      count: stats.unassigned,
      label: "待混样样品",
    },
    {
      title: "质控抽检处理",
      description: "为已混样的样品进行质控抽检编号分配",
      icon: ClipboardCheck,
      href: "/dashboard/samples/qc-sampling",
      color: "bg-green-500",
      count: stats.mixedOnly,
      label: "待抽检组数",
    },
    {
      title: "处理完成记录",
      description: "查看已完成编号分配的样品记录",
      icon: FileText,
      href: "/dashboard/samples/completed",
      color: "bg-purple-500",
      count: stats.samplingGroups,
      label: "已完成组数",
    },
  ]

  return (
      <div className="p-6 space-y-6">
        {/* 页面标题 */}
        <div>
          <h1 className="text-2xl font-bold">样品管理概览</h1>
          <p className="text-muted-foreground">实验室样品管理系统总览</p>
        </div>

        {/* 统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">总样品数</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.total}</div>
              <div className="flex items-center text-xs text-muted-foreground mt-1">
                <TrendingUp className="h-3 w-3 mr-1" />
                系统中所有样品
              </div>
            </CardContent>
          </Card>
          <Card className="border-l-4 border-gray-400">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">未混样处理样品数</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-gray-600">{stats.unassigned}</div>
              <div className="flex items-center text-xs text-muted-foreground mt-1">
                <Clock className="h-3 w-3 mr-1" />
                等待生成混合编号
              </div>
            </CardContent>
          </Card>
          <Card className="border-l-4 border-yellow-400">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">未质控抽检样品数</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-yellow-600">{stats.mixedOnly}</div>
              <div className="flex items-center text-xs text-muted-foreground mt-1">
                <Beaker className="h-3 w-3 mr-1" />
                等待生成抽检编号
              </div>
            </CardContent>
          </Card>
          <Card className="border-l-4 border-green-400">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">已质控抽检样品数</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-green-600">{stats.samplingGroups}</div>
              <div className="flex items-center text-xs text-muted-foreground mt-1">
                <ClipboardCheck className="h-3 w-3 mr-1" />
                已完成抽检编号
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 快速操作 */}
        <div>
          <h2 className="text-lg font-semibold mb-4">快速操作</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {quickActions.map((action) => {
              const Icon = action.icon
              return (
                  <Card key={action.title} className="hover:shadow-lg transition-shadow">
                    <CardHeader>
                      <div className="flex items-center gap-3 mb-4">
                        <div className={`p-3 rounded-lg ${action.color} text-white`}>
                          <Icon className="h-8 w-8" />
                        </div>
                        <div>
                          <CardTitle className="text-lg">{action.title}</CardTitle>
                          <p className="text-sm text-muted-foreground mt-1">{action.description}</p>
                        </div>
                      </div>
                      <div className="flex items-center justify-between">
                        <div>
                          <div className="text-3xl font-bold">{action.count}</div>
                          <div className="text-sm text-muted-foreground">{action.label}</div>
                        </div>
                        <Link href={action.href}>
                          <Button className="bg-transparent" variant="outline">
                            进入管理
                            <ArrowRight className="h-4 w-4 ml-2" />
                          </Button>
                        </Link>
                      </div>
                    </CardHeader>
                  </Card>
              )
            })}
          </div>
        </div>

        {/* 处理进度总览 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5" />
              整体处理进度
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div>
                <div className="flex justify-between text-sm mb-3">
                  <span>混合编号完成率</span>
                  <span className="font-semibold">
                  {stats.total > 0 ? Math.round(((stats.total - stats.unassigned) / stats.total) * 100) : 0}%
                </span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-3">
                  <div
                      className="bg-blue-500 h-3 rounded-full transition-all"
                      style={{
                        width: `${stats.total > 0 ? ((stats.total - stats.unassigned) / stats.total) * 100 : 0}%`,
                      }}
                  ></div>
                </div>
                <div className="text-xs text-muted-foreground mt-2">
                  已处理 {stats.total - stats.unassigned} / {stats.total} 个样品
                </div>
              </div>
              <div>
                <div className="flex justify-between text-sm mb-3">
                  <span>抽检编号完成率</span>
                  <span className="font-semibold">
                  {stats.mixedGroups > 0 ? Math.round((stats.mixedGroups - stats.mixedOnly) / stats.mixedGroups) * 100 : 0}%
                </span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-3">
                  <div
                      className="bg-green-500 h-3 rounded-full transition-all"
                      style={{
                        width: `${stats.mixedGroups > 0 ? (stats.mixedGroups - stats.mixedOnly) / stats.mixedGroups * 100 : 0}%`,
                      }}
                  ></div>
                </div>
                <div className="text-xs text-muted-foreground mt-2">
                  已完成 {stats.mixedGroups-stats.mixedOnly} / {stats.mixedGroups} 个组
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
  )
}
